<template>
  <common-page>
    <AuthFormCard>
      <template v-slot:form>
        <!--表单插槽-->
        <el-form
            label-position="top"
            label-width="100px"
            :model="loginForm"
            :rules="loginRules"
            ref="ruleFormRef"
            @keydown.enter="loginSubmit(ruleFormRef)"
        >

          <el-form-item :label="AuthLang.label.mail" prop="email">
            <el-input clearable size="large" :placeholder="AuthLang.rules.mailInput" v-model="loginForm.email"/>
          </el-form-item>

          <el-form-item :label="AuthLang.label.password" prop="password">
            <el-input show-password size="large" :placeholder="AuthLang.rules.passwordInput"
                      v-model="loginForm.password"/>
          </el-form-item>

        </el-form>

      </template>
      <!--表单底部插槽-->
      <template v-slot:footer>
        <div>
          <el-button
              round
              type="primary"
              @click="loginSubmit(ruleFormRef)"
          >登陆
          </el-button>
        </div>
        <div>
          <el-button
              round
              type="success"
              @click="$router.push({name:'register'})"
          >注册
          </el-button>
        </div>
        <div>
          <el-button type="success" text round class="forget-password" @click="$router.push({name:'changePassword'})">
            忘记密码
          </el-button>
        </div>
      </template>

    </AuthFormCard>
  </common-page>

</template>

<script lang="ts">
import {reactive, ref} from "vue";
import AuthFormCard from "@/components/auth/AuthFormCard.vue";
import {AuthStore} from "@/store/AuthStore";
import {Message} from "@/utils/Message";
import {FormInstance} from "element-plus";
import {LoginUser} from "@/entity/auth/AuthEntity";
import {passwordLoginRules} from "@/entity/auth/AuthRules";
import {AuthLang} from "@/lang/auth/AuthLang";
import {useRouter} from "vue-router";
import {BusinessCode} from "@/lang/Common";
import {JwtUtils} from "@/utils/Jwt";
import CommonPage from "@/App.vue";

export default {
  name: "LoginPage",
  components: {
    CommonPage,
    AuthFormCard,
  },
  setup() {
    // 导入登录表单规则
    const loginRules = passwordLoginRules;
    const authStore = AuthStore();
    // 创建表单示例，与页面绑定
    const ruleFormRef = ref<FormInstance>();
    const router = useRouter();
    // 初始化表单字段
    let loginForm: LoginUser = reactive({
      email: "",
      password: "",
    });

    const loginSubmit = async (formEl: FormInstance | undefined) => {
      await formEl?.validate((isValid) => {
        // 表单验证
        if (isValid) {
          authStore.login({...loginForm}).then(res => {
            // 是否是对应的业务码
            if (res?.data?.code == BusinessCode.SuccessLogin) {
              // 信息提示
              Message.success(AuthLang.ok.login);
              // 重置表单
              ruleFormRef.value?.resetFields();
              // 提取jwt中的用户信息
              JwtUtils.parseTokenInfo();
              // 跳转到首页
              router.push({name: "list"});
            }
          });
        }
      });
    };


    return {
      loginForm,
      loginRules,
      loginSubmit,
      ruleFormRef,
      AuthLang
    };
  }
};
</script>

<style scoped>
.forget-password {
  padding: 15px !important;
}
</style>